<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // vuex
        // 下载
        // yarn add vuex -S


        // 引入
        import Vue from 'vue'
        import Vuex from 'vuex'

        Vue.use(Vuex)// 给组件 添加 $store 



        1. state、getters 都是 映射 在 组件 的 computed 中
        2. mutations、actions  都是 映射 在 组件 的 methods 中



        // state   的调用
        // 直接调用
        this.$store.state.变量名
        // 映射使用
        import { mapState } from 'vuex'
        export default {
            computed: {
                ...mapState(['state变量名']),// 不能改名
                ...mapState({ // 能改名
                    留在原地计算属性名: 'state中变量名'
                })
            }
        }

        // mutations    的使用
        // 直接调用
        this.$store.commit('mutations中的函数名', 传值)
        // 映射使用
        import { mapMutations } from 'vuex'
        export default {
            methods: {
                ...mapMutations(['mutations中函数名'])
            }
        }


        // actions  的使用
        // 直接调用
        this.$store.commit('mutations中的函数名', 传值)
        // 映射使用
        import { mapActions } from 'vuex'
        export default {
            methods: {
                ...mapActions(['actions函数名'])
            }
        }

        // getters  的使用
        // 直接调用
        this.$store.getters.计算属性的名字
        // 映射使用
        import { mapGetters } from 'vuex'
        export default {
            computed: {
                ...mapGetters(['getters中计算属性的名字'])
            }
        }


        // 注册vuex  公共资源
        const store = new Vuex.Store({
            // state:   储存共享的数据源,仅可以被 mutations 更改
            state: {
                key: value
            },
            // mutations:  同步函数,`唯一` 可以 `同步` 修改 state的 地方
            mutations: {
                fn() { }
            },
            // actions: 异步函数,异步 的 修改 state，但其不能直接改，最终必须 commit 到 指定 mutations 中
            actions: {
                fn2() { }
            },
            // getters: vuex 的计算属性,数据源 计算而得到，类似computed、优势带缓存
            getters: {
                fn3() {
                    return
                }
            }
        })

        export default store

    </script>
</body>

</html>